<template>
  <div class="container tree-list-layout">
    <treeCategory @click="handleTreeClick" ref="treeCategory" class="box-left"/>
    <data-view
      ref="dataView"
      propViewKey="base_matr_category"
      propViewForm="base/material/category/detail.vue"
      :propInitData="selectedTreeNode"
      :propIsTdesign="true"
      class="box-right"
      @afterTableDataChange="loadTree"
    />
  </div>
</template>

<script>
import treeCategory from '@/components/custom/bus/treeCategory.vue'

export default {
  name: 'matrcategory',
  data() {
    return {
      treeData: [],
      treeFilter: '',
      selectedTreeNode: {},
      treeEntry: '/base/matr_category/all',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  components: {
    treeCategory
  },
  watch: {
    treeFilter(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    handleTreeClick(data) {
      this.selectedTreeNode = data
      let wrapper = this.$newWrapper().eq('parent_id', data.id)
      this.$refs.dataView.setQueryWrapper(wrapper)
    },
    loadTree() {
      this.$refs.treeCategory.load()
    },
  },
  created() {
  },
  props: ['propFlowKey'],
}
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;
    background-color: #fff;
  }
</style>
